<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>预约界面</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
		
</head>

<body style="background-image: url(img/log_img/login-bg2.jpg);background-size:100%;background-repeat: no-repeat;">
	 <!--预约添加  end-->
		  
		  <!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document" >
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">预约信息</h4>
					</div>
					<div class="modal-body">
						<form  id="saveFormId" action="#" method="post">
							
							<div class="form-group">
								<label for="titleId">联系电话</label>
								<input type="hidden" name="id" id="userId">
								<input type="text"
									class="form-control" name="tel" id="telId"
									placeholder="请输入联系电话">
							</div>
							
							<div class="form-group">
								<label for="startTimeId">预约时间（可看房时间09:00-17:00）</label>
								<input type="text"
									class="form-control form_datetime" name="bookTime" id="bookTimeId"
									placeholder="请选择预约时间" autocomplete="off">
							</div>
							
							<div class="form-group">
								<label for="remarkId">经纪人:</label>
								<label for="remarkId" id="managerId">吴先生</label>
								
							</div>
							<div class="form-group">
								<label for="remarkId">联系电话：</label>
								<label for="remarkId" id="managerTelId">18194001005</label>
							</div>
							
						</form>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" onclick="doUpdate()">提交
						</button>
					</div>
				</div>
			</div>
		</div>
		<!--  modal end-->
		  
	
	<!-- Modal -->
		<div class="modal fade" id="myModal_error" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">提示</h4>
					</div>
					<div class="modal-body">
						<form  id="saveFormId" action="#" method="post">
							<div class="form-group">
								<label id="errorMessage" for="remarkId"></label>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button   class="btn btn-primary" data-dismiss="modal" onclick="closeModal()">确认</button>
						
					</div>
				</div>
			</div>
		</div>
	
	<div class="container" style="background-color:white;margin-top: 50px">
		<h1>预约信息</h1>
		<hr/>
		<a href="/index"  class="btn btn-lg btn-primary" >
								返回主页</a>
			&emsp;
		<button type="button" class="btn btn-primary btn-lg" onclick="doUpdateModal()">修改
						</button>
						&emsp;
		<button type="button" class="btn btn-warning btn-lg" onclick="doDeleteObjects()">删除
						</button>
		<hr/>
		
		
		
		<table class="table table-bordered table-hover">
			<thead >
				<tr >
					<th style="text-align:center;vertical-align:middle;"><input type="checkbox"  id="checkAll"></th>
					<th style="text-align:center;vertical-align:middle;">预约人</th>
					<th style="text-align:center;vertical-align:middle;">联系电话</th>
					<th style="text-align:center;vertical-align:middle;">预约时间</th>
					<th style="text-align:center;vertical-align:middle;">经纪人</th>
					<th style="text-align:center;vertical-align:middle;">经纪人电话</th>
					<th style="text-align:center;vertical-align:middle;">看房地址</th>
					<th style="text-align:center;vertical-align:middle;">预约有效性</th>
					
				</tr>
			</thead>
			<tbody id="tbodyId">
				<tr style="text-align:center;vertical-align:middle;">
					<td colspan="7">数据正在积极的加载中......</td>
					
				</tr>
			</tbody>
		</table>
	</div>

	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="/bootstrap/js/bootstrap.min.js"></script>
	<script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript">
	//注册点击事件
	$(function(){
	
	 $("#checkAll").change(doChangeTBodyCheckboxState);
	 //tbody中checkbox对象事件注册
	 //$(".cItem").change(doChangeTHeadCheckboxState);不可以,页面加载完成cItem对象还不存在
	 //$("#tbodyId").on("change",".cItem",doChangeTHeadCheckboxState)
	 $("#tbodyId").on("change","input:checkbox",doChangeTHeadCheckboxState)
 });
	
	//关闭模态框触发事件
	
	
	//修改thead中checkbox状态,让其状态同步于tbody中checkbox逻辑与以后的结果.
	 function doChangeTHeadCheckboxState(){
		 //1.计算tbody中checkbox状态逻辑与的结果
		 var flag=true;
		 $("#tbodyId input:checkbox")
		 .each(function(){
			 flag=flag&&$(this).prop("checked");
		 });
		 //2.修改thead中checkbox的值
		 $("#checkAll").prop("checked",flag);
	 }

	
    //修改选中状态
    function doChangeTBodyCheckboxState(){
 	   //1.获取当前点击对象的checked属性的值
 	   var flag=$(this).prop("checked");//true or false
 	   //2.将tbody中所有checkbox元素的值都修改为flag对应的值。
 	  //第一种方案
	   /* $("#tbodyId input[name='cItem']")
	   .each(function(){
		   $(this).prop("checked",flag);
	   }); */
	   //第二种方案
	   $("#tbodyId input[type='checkbox']").prop("checked",flag);
   }

    
    
   
	
    //向服务端发送异步请求获取活动信息并更新到页面上
    function findBook(){
    	//debugger 此单词写的位置很重要(这是入口),你要对谁进行断点分析.
    	 $("#checkAll").prop("checked",false);
    	let url="/book/doFindBook";
    	
    	let params={};
    	//借助jquery中的ajax函数,向服务端发送异步请求获取活动信息
    	$.ajax({//具体格式官网有定义(假如不想看官网,看现成第三方网站找ajax)
    		url:url,
    		data:params,
    		dataType:"json",
    		success:function(result){
    			//alert(result);
    			doHandleQueryResult(result.data);
    		}
    	});
    };
    //处理服务端返回的活动信息,迭代result,并将result内容填充tbody位置
    function doHandleQueryResult(result){
    	///debugger
    	//console.log(result)
    	//1.获取tbody对象,并清空原有内容
    	var tBody=$("#tbodyId");//原生写法-document.querySelector("#tbodyId")
    	tBody.empty();//清空tbody中原有内容
    	//2.迭代result,将活动信息追加到tbody中   
    	result.forEach((item)=>{//这里的item为一个变量,代表数组中某一个元素
    		//debugger
    		tBody.append(
    		  `<tr style="text-align:center;vertical-align:middle;" class="cBox" name="cItem">
    		  	<td><input type="checkbox" value=${item.id}></td>
    		     <td>${item.userName}</td>
    		     <td class="itemTel">${item.tel}</td>
    		     <td class="itemBookTime">${item.bookTime}</td>
    		     <td>${item.manager}</td>
    		     <td>${item.managerTel}</td>
    		     <td>${item.address}</td>
    		     <td>${item.state==1?'有效':'已结束'}</td>
    		     
    		   </tr>`		
    		);
    	});
    }
    
    //删除操作
    function doDeleteObjects(){
 	   //1.获取选中的id值
 	   var ids=doGetCheckedIds();
 	  
 	   if(ids.length==0){
 		  let errorMessage=$("#errorMessage");
			errorMessage.text("至少选择一个");
			$('#myModal_error').modal();
 		  return;
 	   }
 	   //2.发异步请求执行删除操作
 	   var url="/book/doDeleteObjects";
 	   var params={"ids":ids.toString()};
 	   //console.log(params);
 	   $.post(url,params,function(result){
 		   if(result.state==1){
 			  let errorMessage=$("#errorMessage");
 				errorMessage.text("删除成功");
 				$('#myModal_error').modal();
 			
 		   }else{
 			  let errorMessage=$("#errorMessage");
				errorMessage.text(result.message);
				$('#myModal_error').modal();
 			 
 		   }
 	   });
    }

    //获取选中的id
    function doGetCheckedIds(){
 	   //定义一个数组,用于存储选中的checkbox的id值
 	   var array=[];//new Array();
 	   //获取tbody中所有类型为checkbox的input元素
 	   $("#tbodyId input[type=checkbox]").
 	   //迭代这些元素，每发现一个元素都会执行如下回调函数
 	   each(function(){
 		   //假如此元素的checked属性的值为true
 		   if($(this).prop("checked")){
 			   //调用数组对象的push方法将选中对象的值存储到数组
 			   array.push($(this).val());
 		   }
 	   });
 	   return array;
  }
	
    //信息回显在模态框上
	function doUpdateModal(){
		 var ids=doGetCheckedIds();
	 	  
	 	   if(ids.length==0){
	 		  let errorMessage=$("#errorMessage");
				errorMessage.text("请选择一条信息修改");
				$('#myModal_error').modal();
	 		  return;
	 	   }
	 	  if(ids.length>1){
	 		  let errorMessage=$("#errorMessage");
				errorMessage.text("只能选择一条信息修改");
				$('#myModal_error').modal();
	 		  return;
	 	   }
	 	   //1.拿到页面信息
	 	   var select=$("#tbodyId input:checked:checked");
	 	   let id=select.val();
	 	   console.log(id);
	 	 let tel= select.parent().siblings(".itemTel").text()
			let bookTime=select.parent().siblings(".itemBookTime").text()
			//2.回显在模态框上
			$(".modal-body #telId").val(tel);
	 	$(".modal-body #bookTimeId").val(bookTime);
	 	$(".modal-body #userId").val(id);
	
			$('#myModal').modal();
			}
	
    
    //更新操作
	function doUpdate(){
	 	   var url="/book/doUpdateObject";
	 	  let id=$(".modal-body #userId").val();
	 	let tel= $(".modal-body #telId").val();
		 	let bookTime=$(".modal-body #bookTimeId").val();
	 	   var params={"id":id,"tel":tel,"bookTime":bookTime};
	 	   //console.log(params);
	 	   $.post(url,params,function(result){
	 		   if(result.state==1){
	 			  
	 			  let errorMessage=$("#errorMessage");
	 				errorMessage.text("更新成功");
	 				$('#myModal_error').modal();
	 			
	 		   }else{
	 			  let errorMessage=$("#errorMessage");
					errorMessage.text(result.message);
					$('#myModal_error').modal();
	 			 
	 		   }
	 	   });
	    }
	
	function closeModal(){
		if($("#errorMessage").text()=="更新成功"){
			$('#myModal').modal('hide');
		}
		findBook();
	}
    //时间控制器
     $(".form_datetime").datetimepicker({
        		language:'zh-CN',
        		startDate:new Date(),
        		format:'yyyy/mm/dd hh:00',
        		minView:1,
        		autoclose:true
        	})
  //jquery中定义的页面加载完整执行方式如下:
  // $(function(){//假如所有的js代码放到html页面的head标签,建议这样写
	  findBook();
   //});//页面加载完成以后执行
  </script>
</body>
</html>




